/* 全局变量 */
:root {
  --font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  /* 设置字体族 */
  --line-height: 1.5;
  /* 设置行高 */
  --font-weight: 400;
  /* 设置字体粗细 */
  --color-light: #213547;
  /* 设置浅色模式下的文字颜色 */
  --color-dark: rgba(255, 255, 255, 0.87);
  /* 设置深色模式下的文字颜色 */
  --bg-color-light: #ffffff;
  /* 设置浅色模式下的背景颜色 */
  --bg-color-dark: #242424;
  /* 设置深色模式下的背景颜色 */
  --link-color: #646cff;
  /* 设置链接颜色 */
  --link-hover-color-dark: #535bf2;
  /* 设置深色模式下链接悬停颜色 */
  --link-hover-color-light: #747bff;
  /* 设置浅色模式下链接悬停颜色 */
  --button-bg-color-dark: #1a1a1a;
  /* 设置深色模式下按钮背景颜色 */
  --button-bg-color-light: #f9f9f9;
  /* 设置浅色模式下按钮背景颜色 */
  --button-text-color-dark: rgba(255, 255, 255, 0.87);
  /* 设置深色模式下按钮文字颜色 */
  --button-text-color-light: #000000;
  /* 设置浅色模式下按钮文字颜色 */
  --button-border-hover-color: #646cff;
  /* 设置按钮悬停边框颜色 */
  --focus-outline-color: -webkit-focus-ring-color;
  /* 设置焦点轮廓颜色 */
  --max-width: 1280px;
  /* 设置最大宽度 */
  --padding: 2rem;
  /* 设置内边距 */
}

body {
  margin: 0;
  /* 设置外边距为0 */
  display: flex;
  /* 设置为弹性盒布局 */
  place-items: center;
  /* 水平和垂直居中对齐 */
  min-width: 320px;
  /* 设置最小宽度 */
  min-height: 100vh;
  /* 设置最小高度为视口高度 */
  font-family: var(--font-family);
  /* 设置字体族 */
  line-height: var(--line-height);
  /* 设置行高 */
  font-weight: var(--font-weight);
  /* 设置字体粗细 */
  color: var(--color-dark);
  /* 设置文字颜色 */
  background-color: var(--bg-color-dark);
  /* 设置背景颜色 */
  font-synthesis: none;
  /* 禁用字体合成 */
  text-rendering: optimizeLegibility;
  /* 优化文字渲染 */
  -webkit-font-smoothing: antialiased;
  /* 抗锯齿 */
  -moz-osx-font-smoothing: grayscale;
  /* 灰度抗锯齿 */
  user-select: none;
  /* 禁止文本选择 */
}

a {
  font-weight: 500;
  /* 设置链接字体粗细 */
  color: var(--link-color);
  /* 设置链接颜色 */
  text-decoration: inherit;
  /* 继承文本装饰 */
  user-select: none;
  /* 禁止文本选择 */
}

a:hover {
  color: var(--link-hover-color-dark);
  /* 设置链接悬停颜色 */
}

h1 {
  font-size: 3.2em;
  /* 设置标题字体大小 */
  line-height: 1.1;
  /* 设置标题行高 */
  user-select: none;
  /* 禁止文本选择 */
}

button {
  border-radius: 8px;
  /* 设置按钮圆角 */
  border: 1px solid transparent;
  /* 设置按钮边框 */
  padding: 0.6em 1.2em;
  /* 设置按钮内边距 */
  font-size: 1em;
  /* 设置按钮字体大小 */
  font-weight: 500;
  /* 设置按钮字体粗细 */
  font-family: inherit;
  /* 继承字体族 */
  background-color: var(--button-bg-color-dark);
  /* 设置按钮背景颜色 */
  color: var(--button-text-color-dark);
  /* 设置按钮文字颜色 */
  cursor: pointer;
  /* 设置鼠标悬停样式 */
  transition: border-color 0.25s;
  /* 设置边框颜色过渡效果 */
  user-select: none;
  /* 禁止文本选择 */
}

button:hover {
  border-color: var(--button-border-hover-color);
  /* 设置按钮悬停边框颜色 */
}

.card {
  padding: 2em;
  /* 设置卡片内边距 */
  user-select: none;
  /* 禁止文本选择 */
}

#app {
  max-width: var(--max-width);
  /* 设置应用最大宽度 */
  margin: 0 auto;
  /* 水平居中 */
  padding: var(--padding);
  /* 设置应用内边距 */
  text-align: center;
  /* 设置文本居中对齐 */
  user-select: none;
  /* 禁止文本选择 */
}

/* 颜色模式切换：浅色模式 */
@media (prefers-color-scheme: light) {
  body {
    color: var(--color-light);
    /* 设置浅色模式下的文字颜色 */
    background-color: var(--bg-color-light);
    /* 设置浅色模式下的背景颜色 */
  }

  a:hover {
    color: var(--link-hover-color-light);
    /* 设置浅色模式下链接悬停颜色 */
  }

  button {
    background-color: var(--button-bg-color-light);
    /* 设置浅色模式下按钮背景颜色 */
    color: var(--button-text-color-light);
    /* 设置浅色模式下按钮文字颜色 */
  }
}